<template>
  <view class="Box">
    <view class="numberBox">
      <view class="number">
        <view class="numberLeft">
          订单编号
        </view>
        <view class="numberRight">
          {{ storageData.oderNum }}
        </view>
      </view>
      <view class="numberItem">
        <view class="itemLeft">
          下单时间
        </view>
        <view class="itemRight">
          {{ storageData.createTime }}
        </view>
      </view>
      <view v-if="storageData.oderStatus != 0" class="numberItem">
        <view class="itemLeft">
          支付时间
        </view>
        <view class="itemRight">
          {{ storageData.payTime }}
        </view>
      </view>
      <view v-if="storageData.oderStatus != 0" class="numberItem">
        <view class="itemLeft">
          支付金额
        </view>
        <view class="itemRight">
          ￥{{ storageData.lineFee }}
        </view>
      </view>
    </view>

    <view class="detailsBox">
      <view class="details">
        <image :src="storageData.img" class="detailsImg"></image>
        <view class="detailsRight">
          <view class="proposalName">
            {{ storageData.proposalName }}
          </view>
          <view class="lineFee">
            ￥{{ storageData.lineFee }}/人
          </view>
        </view>
        <image v-if="storageData.oderStatus == 0" class="paymentImg"
               src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/paymentOne.png">
        </image>
        <image v-if="storageData.oderStatus == 1" class="paymentImg"
               src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/paymentTwo.png">
        </image>
        <image v-if="storageData.oderStatus == 2"
               class="paymentImg" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/paymentThree.png">
        </image>
      </view>
      <view class="detailsItem">
        <view class="itemLeft">
          旅行社/机构
        </view>
        <view class="itemRight">
          {{ storageData.userName }}
        </view>
      </view>
      <view class="detailsItem">
        <view class="itemLeft">
          出行日期
        </view>
        <view class="itemRight">
          {{ storageData.createTime }}
        </view>
      </view>
      <view class="detailsItem">
        <view class="itemLeft">
          行程时间
        </view>
        <view class="itemRight">
          {{ storageData.planTime }}
        </view>
      </view>
    </view>

    <view class="lineTypeBox">
      <view v-if="storageData.lineType == 1" class="text">跟团游</view>
      <view v-else-if="storageData.lineType == 2" class="text">拼团游</view>
      <view v-else-if="storageData.lineType == 3" class="text">研学</view>
      <view v-else-if="storageData.lineType == 4" class="text">亲子团游</view>
      <view v-else-if="storageData.lineType == 5" class="text">自助亲朋行</view>
      <view class="rightBox">
        <u-icon color="#fff" name="checkbox-mark" size="18"></u-icon>
      </view>
    </view>

    <view class="TravelNumber">
      <view class="TravelLeft">
        出行人数
      </view>
      <view class="TravelRight">
        {{ storageData.people.length }}人
      </view>
    </view>

    <view class="touristBox">
      <view class="touristTitle">
        <view class="title">
          游客信息
        </view>
        <view class="">

        </view>
      </view>
      <view class="positionBox">
        <view class="">
          共
        </view>
        <view class="number">
          {{ storageData.people.length }}
        </view>
        <view class="">
          位
        </view>
      </view>
      <view class="nameList">
        <view v-for="(item,index) in storageData.people" :key="index" class="">
          <view class="nameItem" @click="touristClick(item)">
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>


    <!-- <view class="projectBox">
      <view class="projectTitle">
        项目
      </view>
      <view class="projectList" v-for="(item,index) in storageData.items" :key="index">
        <view class="projectItem">
          <view class="">
            {{item.chargeName}}
          </view>
          <view class="">
            X{{storageData.people.length}}
          </view>
        </view>
      </view>
    </view> -->


    <view v-if="storageData.lineType == 3" class="responsibilityBox">
      <view class="title">
        确认责任书
      </view>
      <view class="responsibilityItem">
        <view class="responsibilityValue" @click="letterEvent(1)">
          安全确认书
        </view>
        <view class="responsibilityText">
          已阅读并确认
        </view>
        <view class="responsibilityCan">
          <u-icon color="#fff" name="checkbox-mark" size="22"></u-icon>
        </view>
      </view>
      <view class="responsibilityItem">
        <view class="responsibilityValue" @click="letterEvent(2)">
          家长确认书
        </view>
        <view class="responsibilityText">
          已阅读并确认
        </view>
        <view class="responsibilityCan">
          <u-icon color="#fff" name="checkbox-mark" size="22"></u-icon>
        </view>
      </view>
    </view>
    <view class="separateBox">

    </view>
    <view class="TotalPrice">
      <view class="TotalPriceBox">
        <view class="Price">
          <view class="PriceLeft">
            总价￥
          </view>
          <view class="PriceRight">
            {{ storageData.lineFee * storageData.people.length }}
          </view>
        </view>
        <view v-if="storageData.oderStatus == 0" class="confirmBox" @click="confirmEvent">
          确认支付
        </view>
        <view v-if="storageData.oderStatus == 1" class="confirmBox refund" @click="refundClick">
          申请退款
        </view>
        <view v-if="storageData.oderStatus == 3 && storageData.refundStatus == 'SUCCESS'" class="AuditingBox">
          退款成功
        </view>
        <view v-if="storageData.oderStatus == 3 && storageData.refundStatus == 'CLOSED'" class="AuditingBox">
          退款关闭
        </view>
        <view v-if="storageData.oderStatus == 3 && storageData.refundStatus == 'PROCESSING'"
              class="AuditingBox">
          退款处理中
        </view>
        <view v-if="storageData.oderStatus == 3 && storageData.refundStatus == 'ABNORMAL'" class="AuditingBox">
          退款异常
        </view>
      </view>

    </view>
    <u-popup :show="refundShow" mode="center">
      <view class="refundBox">
        <view class="">
          <view class="refundText"> 退款原因</view>
          <u--textarea v-model="refundReason" placeholder="请输入"></u--textarea>
        </view>
        <view class="buttonBox">
          <view class="itemBox cancelBox" @click="cancelRefund">
            取消
          </view>
          <view class="itemBox sumbitBox" @click="sumbitClick">
            提交退款申请
          </view>
        </view>
      </view>
    </u-popup>

    <tui-modal :show="touristShow" custom maskClosable padding="10" @cancel="closeSheet">
      <view class="touristModal">
        <view class="ModalTitle">
          游客信息
        </view>
        <view class="formBox">
          <view v-if="touristData.name" class="formItem">
            <view class="itemLeft">
              姓名
            </view>
            <u--input v-model="touristData.name" border='none'>
            </u--input>
          </view>
          <view v-if="touristData.idCard" class="formItem">
            <view class="itemLeft">
              身份证
            </view>
            <u--input v-model="touristData.idCard" border='none'>
            </u--input>
          </view>
          <view v-if="touristData.tel" class="formItem">
            <view class="itemLeft">
              手机号
            </view>
            <u--input v-model="touristData.tel" border='none'>
            </u--input>
          </view>
          <view v-if="touristData.parentTel" class="formItem">
            <view class="itemLeft">
              家长手机号
            </view>
            <u--input v-model="touristData.parentTel" border='none'>
            </u--input>
          </view>
        </view>
      </view>
    </tui-modal>
  </view>
</template>

<script>
import {
  lineOrderDetail,
  refundInput,
  getSign,
} from "@/api/challenge";

export default {
  data() {
    return {
      storageData: {},
      refundShow: false,
      oderId: "",
      touristShow: false,
      touristData: {}
    }
  },
  onLoad(data) {
    this.oderId = data.id
    this.lineOrderDetailEvent()
  },
  onBackPress(options) {
    console.log('from:' + options.from)
  },
  methods: {
    closeSheet() {
      this.touristShow = false
    },
    touristClick(data) {
      this.touristData = data
      this.touristShow = true
    },
    cancelRefund() {
      this.refundShow = false;
    },
    refundClick() {
      this.refundShow = true;
      this.refundReason = '';
    },
    confirmEvent() {
      var that = this
      getSign({
        prepayId: this.storageData.prepayId,
		// // 聚力
		appId: "wx5b3843197d34d53b",
      }).then(params => {
        wx.requestPayment({
          timeStamp: params.data.timeStamp,
          nonceStr: params.data.nonceStr,
          package: params.data.package,
          signType: params.data.signType,
          paySign: params.data.paySign,
          success: function (successres) {
            postOrder({
              orderSn: that.storageData.oderNum,
              orderAmount: 1,
              payStatus: 1,
            }).then((completeres) => {
              console.log("查询完成", completeres);
            });
            uni.reLaunch({
              url: '/pages/PopularRoute/payStatus?type=1&lineType=' +
                  that.storageData.lineType
            })
          },
          fail: function (failres) {
            console.log(failres);
            uni.reLaunch({
              url: '/pages/PopularRoute/payStatus?type=2&lineType=' +
                  that.storageData.lineType
            })
          },
          complete: function (completeres) {
            console.log("完成", completeres);
          },
        });
      })
    },
    lineOrderDetailEvent() {
      lineOrderDetail({
        tel: uni.getStorageSync("userinfo").phone,
        oderId: this.oderId
      }).then(res => {
        console.log('输出', res)
        this.storageData = res
      })
    },
    sumbitClick() {
      if (this.refundReason == "") {
        uni.$u.toast("请输入退款原因");
      } else {
        refundInput({
          orderNum: this.storageData.oderNum,
          refundReason: this.refundReason,
        }).then((res) => {
          uni.$u.toast("退款审核提交成功");
          this.refundShow = false;
          this.lineOrderDetailEvent()
        });
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.Box {
  width: 100%;
  background: #f2f2f2;
  padding-top: 32rpx;
  font-family: PingFang SC, PingFang SC-Heavy;
}

.numberBox {
  margin: 0 32rpx;
  background-color: #fff;
  padding: 0 20rpx 10rpx 20rpx;
  border-radius: 20rpx;

  .number {
    display: flex;
    justify-content: space-between;
    padding: 32rpx 0 18rpx 0;

    .numberLeft {
      font-weight: 800;
    }


  }

  .numberItem {
    display: flex;
    justify-content: space-between;
    border-top: 2rpx solid #eeeeee;
    font-size: 28rpx;
    color: #757575;
    padding: 22rpx 0 18rpx 0;
  }
}

.detailsBox {
  margin: 32rpx;
  background-color: #fff;
  border-radius: 20rpx;

  .details {
    display: flex;
    padding: 20rpx;
    position: relative;

    .detailsImg {
      width: 152rpx;
      height: 152rpx;
      border-radius: 10rpx;
    }

    .detailsRight {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 20rpx;

      .proposalName {
        font-weight: 800;
      }

      .lineFee {
        color: #ff0000;
      }
    }

    .paymentImg {
      width: 120rpx;
      height: 124rpx;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }

  .detailsItem {
    display: flex;
    justify-content: space-between;
    border-top: 2rpx solid #eeeeee;
    padding: 22rpx 0 18rpx 0;
    margin: 0 20rpx;
    font-size: 28rpx;

    .itemLeft {
      color: #757575;
    }

    .itemRight {
      color: #212121;
    }
  }


}

.lineTypeBox {
  margin-top: 40rpx;
  background-color: #ffff;
  margin: 0 32rpx;
  display: flex;
  height: 100rpx;
  border-radius: 20rpx;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;

  .text {
    font-weight: 800;
  }

  .rightBox {
    width: 36rpx;
    height: 36rpx;
    background: #4186f5;
    border-radius: 50%;

  }
}

.TravelNumber {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 20rpx;
  background-color: #ffff;
  margin: 32rpx;
  height: 100rpx;
  padding: 0 32rpx;

  .TravelLeft {
    font-weight: 800;
  }
}

.touristBox {
  border-radius: 20rpx;
  background-color: #ffff;
  margin: 32rpx;
  padding: 32rpx;

  .touristTitle {
    .title {
      font-weight: 800;
    }
  }

  .positionBox {
    display: flex;

    .number {
      color: #ff1818;
    }
  }

  .nameList {
    display: flex;
    margin: 20rpx 0;

    .nameItem {
      border: 1px solid #dddddd;
      border-radius: 4px;
      padding: 4rpx 16rpx;
      margin: 0 10rpx 10rpx 0;
    }
  }
}

.projectBox {
  border-radius: 20rpx;
  background-color: #ffff;
  margin: 32rpx;
  padding: 32rpx;

  .projectTitle {
    font-weight: 800;
  }

  .projectList {
    .projectItem {
      display: flex;
      justify-content: space-between;
      margin-top: 32rpx;
    }
  }
}

.responsibilityBox {
  background: #ffffff;
  border-radius: 20rpx;
  margin: 32rpx 40rpx 0 32rpx;
  padding: 32rpx;

  .title {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Heavy;
    font-weight: 800;
    text-align: left;
    color: #212121;
  }

  .responsibilityItem {
    display: flex;
    border-bottom: 2rpx solid #eeeeee;
    justify-content: space-between;
    padding: 20rpx 0;

    .responsibilityValue {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      color: #4186f5;
      border-bottom: 2rpx solid #4186f5;
      margin-right: 230rpx;
    }

    .responsibilityText {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      margin-right: 10rpx;
    }

    .responsibilityNot {
      width: 40rpx;
      height: 40rpx;
      background: #ffffff;
      border: 3rpx solid #dddddd;
    }

    .responsibilityCan {
      width: 40rpx;
      height: 40rpx;
      background: #0268fd;
      border: 3rpx solid #0268fd;
    }

  }
}

.separateBox {
  padding-bottom: 120rpx;
}

.TotalPrice {
  width: 100%;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  background: #fff;

  .TotalPriceBox {
    height: 100rpx;
    padding: 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .Price {
      display: flex;
      color: #ff0202;
      align-items: center;

      .PriceLeft {
        font-size: 24rpx;
      }

      .PriceRight {
        font-size: 36rpx;
      }
    }

    .confirmBox {
      width: 192rpx;
      height: 64rpx;
      background: #4186f5;
      border-radius: 32rpx;
      color: #fff;
      text-align: center;
      line-height: 64rpx;
    }

    .refund {
      background: #ff5e5e;
    }

    .AuditingBox {
      color: #ff5e5e;
    }

  }

}


.refundBox {
  width: 600rpx;
  height: 340rpx;
  padding: 20rpx;
  border-radius: 20rpx;

  .refundText {
    font-weight: 800;
    margin: 10rpx 0;
  }

  .buttonBox {
    display: flex;
    justify-content: space-around;
    margin-top: 30rpx;

    .itemBox {
      width: 220rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      color: #fff;
      border-radius: 10rpx;
    }

    .cancelBox {
      background: #81d3f8;
    }

    .sumbitBox {
      background: #d9001b;
    }
  }
}

.touristModal {
  .ModalTitle {
    font-size: 40rpx;
    font-weight: 800;
    padding: 20rpx 0 10rpx 0;
    text-align: center;
  }

  .formBox {
    width: 622rpx;
    background: #ffffff;
    border-radius: 10px;
    margin: auto;

    .formItem {
      padding: 18rpx 0rpx;
      margin: 0 30rpx;
      display: flex;
      border-bottom: 2rpx solid #eeeeee;
      font-size: 28rpx;

      .itemLeft {
        width: 200rpx;
      }
    }
  }
}
</style>
